<template>
  <div class="box">
    <FullCalendar ref="full" :options="calendarOptions" />
    <el-button @click="btnclick" type="primary" >章组件</el-button>
  </div>
</template>
<script>
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import { getData } from "./api";
export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        locale:'zh-cn',
        weekends: false, // initial value
        events: [],
        dateClick: this.dateClick,
        eventClick: this.eventClick,

      },
    };
  },
  mounted() {
    console.log(this.$children[0].getApi().gotoDate);
    const next = document.querySelector(".fc-next-button");
    const prev = document.querySelector(".fc-prev-button");
    next.addEventListener("click", () => {
      console.log("点击下月 ");
      this.getData("3");
    });
    prev.addEventListener("click", () => {
      console.log("点击上月 ");
      this.getData("2");
    });
    this.getData("2");
  },
  methods: {
    btnclick(){
      this.$refs.full.getApi().gotoDate('2022-04')
      console.log('btnClick',this.$refs.full);
    },
    eventClick(data) {
      const params = {
        ...data,
        dateStr: data.event.startStr,
      };
      this.dateClick(params);
    },
    dateClick(data) {
      // console.log("点击dateClick", data);
      console.log(data.dateStr, "data.dateStr");
    },
    // 获取数据
    async getData(data) {
      const res = await getData(data);
      if (res.success) {
        this.calendarOptions.events = res.data.map((x) => {
          return {
            start: x.time,
            end: x.time,
            title: "已填报",
          };
        });
      }
    },
    findParent(dom, targetClassName) {
      const parent = dom.parentNode;
      if (parent.className.includes(targetClassName)) {
        return parent;
      } else {
        this.findParent(dom.parent, targetClassName);
      }
    },
  },
};
</script>

<style scoped lang='less'>
.box {
  width: 800px;
  height: 1000px;
  margin: 50px auto;
}
.redSS {
  color: red !important;
}
</style>
